<template>
  <div class="app-menu flex-column">
    <div class="logo"></div>
    <div class="menu-box">
      <el-menu class="menu" :mode="mode" :default-active="$route.name" size="small">
        <template v-if="menuList.length">
          <el-menu-item v-for="item in menuList" :index="item.name" :key="item.name" @click="menuSelect(item)">
            <template #title>
              <div class="flex-row-between" style="width:100%">
                <span>
                  <Icon :icon="item.meta.icon" class="menu-icon"></Icon>
                  <span>{{ item.meta.name }}</span>
                </span>
                <el-text type="primary" class="click gray" @click.stop="open(item)" style="font-size:.8em">新窗口打开</el-text>
              </div>
            </template>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script>
import BaseComponent from "@/application/BaseComponent.vue";
import { menu } from "@/router/router.js";
export default {
  props: ["collapse"],
  // inject: ["$g"],
  extends: BaseComponent,
  data() {
    return {
      mode: undefined //"horizontal"
    };
  },
  computed: {
    user() {
      return (this.$app.session || {}).user || {};
    },
    menuActiveName() {
      let route = this.$route || {};
      return route.name;
    },
    menuList() {
      // return this.$app.session.menus || [];
      // let permissions = (this.$app.session || {}).permissions || [];
      // let platform = permissions.find((item) => item.path == "/") || {};
      return menu;
    }
  },
  created() {},
  mounted() {},
  methods: {
    // isActive(menu) {
    //   let active = (this.$route.matched || []).find((item) => item.path === menu.path);
    //   return active ? "is-active" : "";
    // },
    menuSelect(item) {
      let url = item.path;
      if (url) {
        this.$router.push(url).catch((err) => {
          console.error("[页面跳转异常]", err);
        });
      }
    },
    open(item) {
      let url = (item.meta || {}).url;
      url && window.open(url, url);
    }
  }
};
</script>
<style>
.app-menu {
  background-color: #0c68ce;
  width: 200px;
  flex-shrink: 0;
}
.menu-box {
  flex-grow: 1;
  margin: 0 10px;
  text-align: right;
  overflow: auto;
}

.logo {
  height: 54px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  margin: 10px;
  background-image: url(/img/logo.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80% auto;
  flex-shrink: 0;
}
.header-right {
  /* margin-right: 15px; */
}
/* .header .el-dropdown {
  color: #fff;
} */

.menu {
  height: 100%;
  overflow: auto;
  --el-menu-bg-color: #fff0;
  --el-menu-hover-bg-color: #105097ee;
  --el-menu-item-height: 33px;
  --el-menu-base-level-padding: 10px;
  /* justify-content: flex-end; */
  --el-menu-text-color: #eee;
  --el-menu-active-color: #ffff;
  --el-menu-hover-text-color: #ffff;

  border: none;
}

.menu-icon {
  font-size: 14px;
  margin-right: 3px;
}

.el-menu-item {
  border-radius: 6px;
  margin: 1px 0;
}
.app-menu .el-menu-item.is-active {
  color: #fff;
  background: #105097;
}
</style>
